<template>
    <div class="login">
              <div class="l_left"></div>
              <div class="l_right">
                  <img class="login_logo" src="./../static/images/login_logo.png" alt="">
                  <div class="form">
                          <div class="form_tit">欢迎登录</div>
                          <div  class="form_item" style="margin-top: 40px;">
                                <img style="width:27px;height:27px" src="./../static/images/name_icon.png" alt="">
                               <input class="myinp" type="text" placeholder="用户名" v-model="username">
                          </div>
                          <div class="form_item"  style="margin-top: 40px;">
                                <img style="width:19px;height:28px;margin-left: 10px;" src="./../static/images/psd_icon.png" alt="">
                                <input class="myinp" type="password" placeholder="密码" v-model="passward">
                          </div>
                          <div  style="margin-top: 80px;">
                              <img @click="login" style="width:370px;height:50px;cursor: pointer;" src="./../static/images/login_btn.png" alt="">
                          </div>
                          <div class="form_upa">
                            <a class="upa" href="https://eduvideo.hangzhou.com.cn/short_video">非联盟学校上传通道点这里</a>
                          </div>
                  </div>
              </div>
    </div>
  </template>
  
  <script>
export default {
    name: 'loginPage',
  
    data(){
      return{
        username:'',
        passward: '',
        token:''
      }
    },
    created(){
    },
    methods:{
      login(){
         this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/config').then(res=>{
             if(res.data.status == 'success'){
               this.token = res.data.data.token
             }
         }).then(()=>{
           this.$axios.post('https://eduvideo.hangzhou.com.cn/api/v1/login',{
            account: this.username,
             password: this.passward,
             token: this.token
           }).then(res=>{
             if(res.data.status =='success'){
                this.$message({
                type: 'success',
                message: res.data.message
              })
              localStorage.setItem('isLoginSuccess',res.data.data.token)
              this.$store.commit('changeState')
              setTimeout(() => {
                  this.$router.push('/')
              }, 2000);
             }else{
              this.$message({
                type: 'error',
                message: res.data.message
              })
                
             }
           })
         })
      },
    }
  }
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  #app,body,html{
    width: 100%;
    height: 100% !important;
  }
  .upa{
 
    color: red;
    margin-top: 20px;
  }
.login{
    background: url('./../static/images/login_bg.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.l_left{
    background: url('./../static/images/login_left.png') no-repeat;
    background-size: 100% 100%;
    width: 643px;
    height: 771px;
}
.l_right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}
.login_logo{
    width: 256px;
    height: 54px;
}
.form{
    background: url('./../static/images/login_box.png') no-repeat;
    background-size: 100% 100%;
    width: 500px;
    height: 530px;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.form_item{
    width: 370px;
    height: 50px;
    border-radius: 25px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding-left: 20px;
}
.form_upa{
  width: 370px;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}
.form_tit{
    font-size: 34px;
    color: #000;
}
.myinp{
    width: calc(100% - 50px);
    outline: none;
    border: none;
    text-indent: 20px;
}
  </style>
  